// 获取留言板内的元素
const topical = document.querySelector('.topical');
const textContent = document.querySelector('.textContent');
const publishBtn = document.querySelector('.publish');
const changeBtn = document.querySelector('.change');

// 获取弹窗内的元素
const popupBox = document.querySelector('.popup');
const popupHeader = document.querySelector('.popup>.header');
const closeBtn = document.querySelector('.close');
const nickNameInp = document.querySelector('#nickName');
const textareaInp = document.querySelector('#textarea');
const sendBtn = document.querySelector('.sendBtn');
const clearBtn = document.querySelector('.clearBtn');

// 获取遮罩层
const maskBox = document.querySelector('.mask');

// 评论数据
let commentData = [{
  id: 0,
  name: '半城锦绣半城愁',
  commentText: '为什么每次看到这样的惨剧我都笑哭了'
}, {
  id: 1,
  name: '青春被风吹散',
  commentText: '吓我一跳，还以为谁头这么大卡马桶里了'
}, {
  id: 2,
  name: '我不想失去自己',
  commentText: '想起了周星驰的一部电影，从对面楼跳进浴室，结果一头扎到马桶里出不来了'
}, {
  id: 3,
  name: '只适合被遗忘',
  commentText: '出门在外，都要注意安全，保护好自己'
}, {
  id: 4,
  name: '文艺小痞子',
  commentText: '独居的我，看到这种事就害怕，有一次我洗澡摔了，脸着地，眼前一黑好久才缓过来，还好我年轻，要是60多了，这可咋办啊'
}];

bindHtml();

// 根据commentData渲染页面
function bindHtml() {
  textContent.innerHTML = commentData.reduce((prev, item) => {
    return prev + `
      <li>
        <a href="#" class="critic">${item.name}</a>
        <div class="comment">${item.commentText}</div>
        <button class="del" data-index="${item.id}">删除</button>
      </li>
    `;
  }, '');
}

// 利用事件委托为删除按钮绑定点击事件
textContent.addEventListener('click', e => {
  if (e.target.className === 'del') {
    let index = e.target.dataset.index - 0; // 转为Number
    commentData = commentData.filter(item => item.id !== index); // 删除index对应id值相等的数据
    bindHtml(); // 重新渲染页面
    // 当数据渲染完毕，内容为空时，显示提示信息
    if (commentData.length === 0) showTips();
  }
});

// 数据为空时，提示信息
function showTips() {
  let li = document.createElement('li');
  li.innerHTML = '暂时没有评论数据，快去发表你的评论吧！';
  textContent.appendChild(li);
}

// 更换话题功能
let newTopical = ['大学生线上求职遭HR辱骂', '解读加快建设全国统一大市场', '泽连斯基向韩国会请求军事援助', '新娘持棍霸气护夫打退婚闹者', '俄乌最大军事冲突恐将到来'];
changeBtn.addEventListener('click', () => {
  commentData.length = 0; // 先清空原先话题的数据
  bindHtml(); // 重新渲染页面
  showTips(); // 评论数据为空时，显示提示信息
  topical.innerText = newTopical[Math.floor(Math.random() * newTopical.length)]; // 随机更换话题
  // changeBtn.disabled = true; // 点击过一次之后禁用按钮点击
  // this.disabled = true; // 注意：因为使用的是箭头函数，this指向上一层函数作用域的主人。所以最后是指向 window
});

let i = 0; // 定义变量i，赋值给新增评论数据的id值(不能重复)

// 弹窗内的发送按钮功能实现
sendBtn.addEventListener('click', () => {
  // 先将表单中的内容进行敏感词过滤
  let nickname = filterSensitive(regArr, nickNameInp.value);
  let text = filterSensitive(regArr, textareaInp.value);
  // 验证表单内容是否为空，只要有一个为空，后续代码不再执行
  if (!nickname || !text) return alert('请完整填写昵称与评论内容！');
  // 验证评论内容是否重复
  for (let i = 0; i < commentData.length; i++) {
    if (commentData[i].name === nickname && commentData[i].commentText === text) return alert('评论内容重复了，请重新输入！');
  }
  // 只有当表单内容不为空，且评论内容不重复时，才会执行后面的代码
  i--; // 每次减1
  // 将最新的数据添加在最前面展示
  commentData.unshift({
    id: i, // 注意：不能赋值为commentData.length，删除之后可能会有重复的id值
    name: nickname,
    commentText: text
  });
  // console.log(commentData);
  bindHtml(); // 为新添加的数据进行页面渲染
  clear(); // 清空输入框和文本域的内容
  hidden(); // 隐藏弹窗和遮罩层
});

let regArr = [/sb/ig, /tmd/ig, /cnm/ig, /靠/g, /垃圾/g, /你妹的/g];
// 敏感词过滤功能
function filterSensitive(reg, words) {
  reg.forEach(item => words = words.replace(item, '***'));
  return words;
}

function clear() {
  if (nickNameInp.value === '' && textareaInp.value === '') return alert('内容已经被清空了！');
  nickNameInp.value = '';
  textareaInp.value = '';
}

// 点击清空按钮，清空输入框和文本域的内容
clearBtn.addEventListener('click', clear);

// 点击发布评论按钮，显示弹窗和遮罩层
publishBtn.addEventListener('click', () => {
  popupBox.style.display = 'block';
  maskBox.style.display = 'block';
});

function hidden() {
  popupBox.style.display = 'none';
  maskBox.style.display = 'none';
}

// 点击closeBtn按钮，隐藏弹窗和遮罩层
closeBtn.addEventListener('click', hidden);

// 拖拽弹窗、限制出界功能实现 
popupHeader.addEventListener('mousedown', e => {
  // 记录鼠标在可拖拽区域中的相对位置
  let x = e.pageX - popupBox.offsetLeft;
  let y = e.pageY - popupBox.offsetTop;
  // 弹窗跟随鼠标移动
  document.addEventListener('mousemove', limitDrag);
  // 如果不限制出界，当popupHeader被拖拽到离开页面可视区域时，就无法关闭和拖拽弹窗了
  function limitDrag(e) {
    let left = e.pageX - x;
    let top = e.pageY - y;
    // 浏览器可视区域的宽高
    let browserWidth = window.innerWidth || document.documentElement.clientWidth;
    let browserHeight = window.innerHeight || document.documentElement.clientHeight;
    // 左右限制出界
    if (left <= 0) {
      left = 0;
    } else if (left >= browserWidth - popupBox.offsetWidth) {
      left = browserWidth - popupBox.offsetWidth;
    }
    // 上下限制出界
    if (top <= 0) {
      top = 0;
    } else if (top >= browserHeight - popupBox.offsetHeight) {
      top = browserHeight - popupBox.offsetHeight;
    }
    popupBox.style.left = left + 'px';
    popupBox.style.top = top + 'px';
  }
  // 监听鼠标弹起事件，移除鼠标移动事件中的限制出界函数
  document.addEventListener('mouseup', () => {
    document.removeEventListener('mousemove', limitDrag);
  });
});

// 阻止选中文字的默认行为
document.addEventListener('selectstart', e => e.preventDefault());